<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_Hdw2Y0',
'ZY_YanFaZhongXin_1',
'ZY_ZhongZhiJiDi_2',
'ZY_ZhongShiCheJian_3',
'ZY_ShengChanCheJian_4',
'img_PlKxg5',
'ZY_BeiJingYanFaZhongXin_6',
'img_dk3u07',
'ZY_ZhangShaYanFaZhongXin_8',
'img_EuAtx9',
'ZY_HuNanZhongZhiJiDi_10',
'img_DHWU711',
'ZY_GuangXiZhongZhiJiDi_12',
'img_n6P_213',
'ZY_ZhongShiCheJian_14',
'img_K7uxs15',
'ZY_ZhongShiCheJian_16',
'img_PxhLh17',
'ZY_ShengChanCheJian_18',
'ZY_19_19',
'ZY_20_20',
'ZY_21_21',
'ZY_22_22'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/pc/css/swiper.min.css">
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/pc/css/animate.css">
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/pc/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
  <style>body{ background: #f7f7f7; } .list{ margin: -18px -15px; } .list .list-item{ width: 25%; margin: 18px 0; text-align: center; box-sizing: border-box; padding: 0 15px; } .list .list-item .con{ position: relative; } .list .list-item img{ display: block; max-width: 100%; } .list .list-item .name{ display: none; position: absolute; bottom: 0; left: 0; right: 0; background: rgb(35 160 77 / 50%); color: #ffffff; font-size: 16px; padding: 15px 0; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }
  .tab a{color: #000}
  </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="banner"> 
   <img src="${img_Hdw2Y0.adImg}" class="img zy" data-type="ad" data-id="${img_Hdw2Y0.adId}"> 
  </div> 
  <div class="tab"> 
   <div class="container">
    <cms:artType var="sczxsub" code="sczx"></cms:artType>
    <c:forEach items="${sczxsub }" var="artType" varStatus="status" >
     <a href="${path }/do/redirect/pc/productionCenter?code=${artType.code}&type=${status.index}">
      <span class="${param.code eq artType.code ? 'active tab-item zy' : 'tab-item zy' }">${artType.artTypeName}</span>
     </a>
    </c:forEach>
   </div>
  </div>
  <div class="container"> 
   <!-- 研发中心 -->
   <div class="tab-content">
    <div class="list flex flex-wrap animate__animated animate__fadeIn">
     <cms:arts var="artList" code="${param.code == null ? 'yfzx' : param.code }" pageNow="${param.pageNow == null ? 0 : param.pageNow }" pageSize="12"></cms:arts>
     <c:forEach items="${artList }" var="item" >
     <div class="list-item"> 
      <div class="con"> 
       <img src="${item.artImage}" class="img zy" />
       <h2 class="name animate__animated animate__fadeIn zy">${item.artTitle}</h2>
      </div> 
     </div>
     </c:forEach>
    </div>
   </div>
  </div> 
  <div class="pagination">
   <c:forEach end="${recodeCount }" begin="1" var="index" varStatus="count">
    <a href="${path }/do/redirect/pc/productionCenter?code=${param.code}&pageNow=${index-1}">${index}</a>
   </c:forEach>
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="http://gwfile.csxuncong.com/wantaien/pc/js/swiper.min.js"></script>
  <script>
   window.onload = function(){
    var itemEls = document.getElementsByClassName('tab-item');
    var type = getQueryVariable('type') || 0;
    tabChange(type)

    for(var i= 0; i < itemEls.length;i++){
     let index = i;
     itemEls[i].onclick = tabChange.bind(this, index)
    }

    function tabChange(index){
     for(var i= 0; i < itemEls.length;i++){
      itemEls[i].className="tab-item";
     }
     itemEls[index].className="tab-item active";
    }
    function getQueryVariable(variable)
    {
     var query = window.location.search.substring(1);
     var vars = query.split("&");
     for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
     }
     return(false);
    }
    var listItemEls = document.getElementsByClassName('list-item');
    for(var i= 0; i < listItemEls.length;i++){
     listItemEls[i].onmouseover = function(){
      var els = this.getElementsByClassName('name');
      var imgels = this.getElementsByClassName('img');
      if(els.length) {
       els[0].style.display = 'block'
      };
      if(imgels.length){
       imgels[0].className="img animate__animated animate__pulse"
      }

     }
     listItemEls[i].onmouseout = function(){
      var els = this.getElementsByClassName('name');
      var imgels = this.getElementsByClassName('img');
      if(els.length) {
       els[0].style.display = 'none'
      };
      if(imgels.length){
       imgels[0].className="img"
      }
     }
    }
   }
    </script> 
 </body>
</html>